{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>业务层级树视图</h2>
        <a href="{{ url_for('hierarchy.index') }}" class="btn btn-outline-primary">
            <i class="bi bi-list"></i> 返回列表
        </a>
    </div>
    
    <div class="card">
        <div class="card-body">
            <div id="jstree-container" class="p-3 border rounded bg-light">
                <!-- 树结构将通过JavaScript渲染 -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.15/themes/default/style.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.15/jstree.min.js"></script>

<script>
$(document).ready(function() {
    // 构建树结构数据
    const treeData = [
        {% for node in tree_data %}
        {
            id: "{{ node.id }}",
            text: "{{ node.text }}",
            children: [
                {% for child in node.children %}
                {
                    id: "{{ child.id }}",
                    text: "{{ child.text }}",
                    {% if child.children %}children: [/* 可以继续嵌套 */]{% endif %}
                },
                {% endfor %}
            ]
        },
        {% endfor %}
    ];

    // 初始化jsTree
    $('#jstree-container').jstree({
        'core': {
            'data': treeData,
            'themes': {
                'responsive': false,
                'variant': 'large'
            }
        },
        'plugins': ['wholerow']
    });
});
</script>
{% endblock %}